<template>
  <div class="data-center-box" >
    <side-tree :ctNavID="ctNavID" :paramsSq="paramsSq" />
    <div class="main" id="main">
      <Search
        ref="search"
        :ctNavID="ctNavID"
        @data="watchData"
        :keyword="keyword"
      />
      <!-- 列表 -->
      <div id="ResultList">
        <ResultList
          v-if="!loading"
          :modeVal="modeVal"
          :searchSort="searchSort"
          :dataList="dataList"
          :ctNavID="ctNavID"
          :paramsSq="paramsSq"
          :curPageSize="curPageSize"
          @modeChange="modeChange"
        />
      </div>
      <div v-if="loading" class="empty-text">
        <loading1 emptyText="加载中..." />
      </div>
    </div>
  </div>
</template>

<script>
import SideTree from "./SideTree.vue";
import Search from "./Search";
import ResultList from "./ResultList";
export default {
  inject: ["reload"],
  components: {
    SideTree,
    Search,
    ResultList,
  },
  data() {
    return {
      ctNavID: "patent", // 数据中心类型
      dataList: {},
      // showTips: false,
      // searchTxt: "",
      // currentSq: "",
      // sqTxt: "",
      // isFocus: false,
      // showTwiceBox: true,
      // toggleTwice: false,
      // twiceInp: "",
      paramsSq: "", // 传递到左侧筛选项的检索式
      // dataSourceSq: "", // 选择数据源的检索式
      // 分页
      // ipi: 1,
      // ips: 10,
      // total: 0,
      // totalTxt: "",
      // timeConsuming: "",
      // pageSize: 10,
      // page: [
      //   {
      //     value: 5,
      //     label: "5",
      //   },
      //   {
      //     value: 10,
      //     label: "10",
      //   },
      //   {
      //     value: 20,
      //     label: "20",
      //   },
      //   {
      //     value: 50,
      //     label: "50",
      //   },
      //   {
      //     value: 100,
      //     label: "100",
      //   },
      // ],
      // screenStr: "",
      // isShowInfo: false,
      // patentDynamic: [],
      // smartSearchTipsCancel: null,
      loading: true,
      keyword: "",
      // noData: false,
      searchSort: 1,
      modeVal: 0, // 图文模式or列表模式
      curPageSize: 10,
    };
  },
  methods: {
    init() {
      this.ctNavID = String(this.$route.query.type) || "patent";
      this.keyword = String(this.$route.query.keyword);
    },
    watchData(data) {
      this.dataList = data;
    },
    modeChange(val) {
      this.modeVal = val;
    },
  },
  watch: {
    $route: {
      handler() {
        this.searchSort = 1;
        this.ctNavID = String(this.$route.query.type) || "patent";
        this.keyword = String(this.$route.query.keyword);
        this.loading = true;
      },
      deep: true,
    },
  },
  beforeMount() {
    this.init();
  },
  mounted() {
    this.$Bus.$on("dcData", (data) => {
      if (data.result && data.result.length >= 0) {
        this.loading = false;
        this.dataList = data;
        let pdom = document.getElementById("main");
        let dom = document.getElementById("ResultList");
        pdom.scrollTop = dom.offsetTop - pdom.offsetTop;
      }
    });
    this.$Bus.$on("beginSearch", (status) => {
      if (status == 1) {
        this.loading = true;
      } else if (status == 2) {
        this.loading = false;
      }
    });
    this.$Bus.$on("searchSortChange", (value) => {
      this.searchSort = value;
    });
    this.$Bus.$on("pageSize", (val) => {
        this.curPageSize = val;
    });
  },
  beforeDestroy() {
    // this.$Bus.$off('dcData')
  },
};
</script>

<style lang="scss" scoped>
.data-center-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 1240px;
  // padding-top: 30px;
  // overflow: hidden;
  ::v-deep {
    // 选择数据源
    .el-dialog__header {
      background-color: $color4;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border-color: $color141 !important;
      background-color: $mainColor !important;
    }
    .group-title-cnt .el-checkbox__label {
      font-size: 14px;
      font-weight: 700;
      color: #000 !important;
    }
    .group-world {
      .el-checkbox__input {
        line-height: normal;
      }
      .el-checkbox__label {
        font-size: 12px;
        color: #000 !important;
      }
    }
    // 筛选项
    .tree-items {
      .el-checkbox__label {
        padding-left: 5px;
        font-size: 12px !important;
        &:last-of-type {
          width: 165px;
          vertical-align: middle;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .mode-select,
    .sort-select {
      .el-input__inner {
        height: 34px;
        line-height: 34px;
        border: none;
        color: $color6;
      }
    }
    // 分页
    .pagination .page-size .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
    .el-select-dropdown__item {
      text-indent: 10px;
    }
    // 检索
    .field-content {
      font-size: 12px;
    }
    .semantic-box {
      .el-textarea__inner {
        border: 0;
      }
    }
    .el-dialog__body .res-dialog-cnt {
      padding-top: 10px;
    }
    .tabs-con .el-button {
      padding: 7px 20px;
    }
    .el-table thead {
      color: #5e5f73 !important;
    }
    .el-table .cell {
      font-size: 12px;
    }
    .el-table th {
      background-color: #ecf4f7 !important;
      > .cell {
        position: relative;
        display: inline-block;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        font-weight: 700 !important;
        vertical-align: middle;
      }
    }
    .el-table td,
    .el-table th.is-leaf {
      border-bottom: 1px solid #dcdfe6;
    }

    .list-wrap {
      em {
        color: #ff8c00;
      }
    }

    .statistics-eltabs {
      margin-top: 20px !important;
      .el-tabs__item {
        font-size: 12px;
        color: $color30 !important;
        &:hover {
          color: $color30;
        }
        &.is-active {
          font-weight: 700;
          color: #000 !important;
        }
      }
    }

    .el-table__empty-text {
      font-size: 12px;
    }

    .twice-elinp {
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        border: 0;
      }
    }

    .tooltip {
      h5 {
        position: relative;
        .ttl {
          line-height: 1.5;
          padding-right: 50px;
          padding-bottom: 10px;
          font-size: 15px;
          font-weight: 700;
          color: #000;
          cursor: pointer;
          &:hover {
            color: $color141;
          }
        }
        .status {
          position: absolute;
          top: 0px;
          right: 0;
          min-width: 44px;
          padding: 3px 10px;
          border-radius: 3px;
          box-sizing: border-box;
          margin: 0 5px;
          font-size: 12px;
          color: #fff;
          background-color: $mainColor;
        }
      }
      .info {
        position: relative;
        display: flex;
        padding: 4px 0;
        span {
          text-align: left;
          font-size: 12px;
          &:nth-child(1) {
            width: 150px;
            color: #000;
          }
          &:nth-child(2) {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .el-message {
      font-size: initial;
    }
  }

  .main {
    flex: 1;
    padding-top: 0.3rem;
    margin-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: initial;
    background-color: $color152;
    overflow-y: scroll;
    height: calc(100vh - 1rem);
  }
}

// animate
.slide-fade-enter-active {
  transition: all 0.2s ease;
}
.slide-fade-enter {
  margin-right: -256px;
  opacity: 0;
}
.tips {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: $color10;
}
</style>